import React from 'react'
import './index.less'
import Tabs from '../../components/Tabs'
import { tabsData } from 'libs/config'
import http from 'libs/http';
import { NoData } from 'components'
export default class extends React.Component {
  state = {
    tabsData,
    courseType: 0,
    reflectionsList: [{courseType: 3}],
  }

  componentDidMount() {
    this.getReflections()
  }
  
  // 全部课程、龙英语、龙编程之间切换
  changeTab = index => () => {
    const { tabsData } = this.state
    let courseType = 0
    tabsData.map((tab, i) => {
      if(index === i) {
        tab.active = true
        courseType = tab.courseType
      }else{
        tab.active = false
      }
    })
    this.setState({
      tabsData, courseType
    }, this.getReflections)
  }

  // 获取学习成就列表
  getReflections = () => {
    const { courseType } = this.state
    http.get('/student/my-reflection/reflections', { courseType }).then(res => {
      this.setState({
        reflectionsList: res.data
      })
    })
  }

  render() {
    const { tabsData, reflectionsList } = this.state
    return (
      <div className="learning-achievement">
        <Tabs
          tabsData={tabsData} 
          changeTab={this.changeTab}
          fontColor="#fff"
        />
        <ul className="learning-achievement-content">
        {
            reflectionsList.length ? reflectionsList.map(item => {
              const {
                beatTaskCount, // 优秀作品
                challengeTimes, // 累计挑战次数
                courseName, // 课程的名称
                courseType, // 1-英语，3-编程
                level, // 课程的等级
                levelStr,
                onTimeRate, // 准时上课率
                practiceTimes, // 累计练习次数
                readPictureBookCount, // 累计绘本阅读
                studyHour, // 累计学习时常
                taskCount, // 累计上传作品
                platformType,
                studyCount,
                allCount
              } = item
              return courseType === 1 && (
                <li>
                  <div className="course-name">
                    <b>{courseName}</b>
                    <span>课程等级：{levelStr}</span>
                    <i className={courseType === 1 ? 'english-icon' : (courseType === 2 ? 'program-icon' : '')}></i>
                  </div>
                  <div className="achievement-content clearfloat">
                    <div className="content-item">
                      <span><b>{studyHour}</b>小时</span>
                      <p>累计学习时间</p>
                    </div>
                    <div className="content-item">
                      <span><b>{practiceTimes}</b>次</span>
                      <p>累计练习次数</p>
                    </div>
                    <div className="content-item">
                      <span><b>{challengeTimes}</b>次</span>
                      <p>累计挑战次数</p>
                    </div>
                    <div className="content-item">
                      <span><b>{readPictureBookCount}</b>本</span>
                      <p>累计绘本阅读</p>
                    </div>
                  </div>
                </li>
              ) || (
                platformType === 3 ? (
                <li>
                  <div className="course-name">
                    <b>{courseName}</b>
                    <span>课程等级：{levelStr}</span>
                    <i className={courseType === 1 ? 'english-icon' : (courseType === 3 ? 'program-icon' : '')}></i>
                  </div>
                  <div className="achievement-content clearfloat">
                    <div className="content-item">
                      <span><b>{studyHour}</b>小时</span>
                      <p>累计学习时间</p>
                    </div>
                    <div className="content-item">
                      <span><b>{taskCount}</b>个</span>
                      <p>累计上传作品</p>
                    </div>
                    <div className="content-item">
                      <span><b>{studyCount}/{allCount}</b></span>
                      <p>学习进度</p>
                    </div>
                    <div className="content-item">
                      <span><b>{beatTaskCount}</b>个</span>
                      <p>优秀作品</p>
                    </div>
                  </div>
                </li>
                ) : (
                  <li>
                    <div className="course-name">
                      <b>{courseName}</b>
                      <span>课程等级：{levelStr}</span>
                      <i className={courseType === 1 ? 'english-icon' : (courseType === 3 ? 'program-icon' : '')}></i>
                    </div>
                    <div className="achievement-content clearfloat">
                      <div className="content-item">
                        <span><b>{studyHour}</b>小时</span>
                        <p>累计学习时间</p>
                      </div>
                      <div className="content-item">
                        <span><b>{taskCount}</b>个</span>
                        <p>累计上传作品</p>
                      </div>
                      <div className="content-item">
                        <span><b>{onTimeRate}</b>%</span>
                        <p>准时上课率</p>
                      </div>
                      <div className="content-item">
                        <span><b>{beatTaskCount}</b>个</span>
                        <p>优秀作品</p>
                      </div>
                    </div>
                  </li>
                )
              )
            }) : (
              <div className="empty-data">
                <i></i>
                <p>立即开始学习，积跬步至千里！</p>
                <a href="/#/student_center/free_classes/layout/free">免费试听</a>
              </div>
            )
          }
          
        </ul>
      </div>
    )
  }
}